<template>
  <div id="choiceness">
    <!-- <div class="mallsearch" @click="routeto('searchlist')"><img src="../assets/images/mall-top-search.png"></div> -->
    <swiper class="choicenessswiper" :list="swiperlist" dots-position="center" :aspect-ratio="280/750" dots-class="activedots"></swiper>
    <div class="flexgrid">
      <div class="flexitem" @click="routeToTrack('choicenesslist', {type: '1'})">
        <img slot="icon" src="../../assets/images/choiceness-type-icon(1).png">
        <p slot="label" class="div-center">篮球</p>
      </div>
      <div class="flexitem" @click="routeToTrack('choicenesslist', {type: '2'})">
        <img slot="icon" src="../../assets/images/choiceness-type-icon(4).png">
        <p slot="label" class="div-center">综训</p>
      </div>
      <div class="flexitem" @click="routeToTrack('choicenesslist', {type: '3'})">
        <img slot="icon" src="../../assets/images/choiceness-type-icon(2).png">
        <p slot="label" class="div-center">跑步</p>
      </div>
      <div class="flexitem" @click="routeToTrack('choicenesslist', {type: '4'})">
        <img slot="icon" src="../../assets/images/choiceness-type-icon(3).png">
        <p slot="label" class="div-center">时尚</p>
      </div>
    </div>
    <div class="hotlist">
      <div class="hottitle">—— 优选推荐 ——</div>
      <div class="hotol">
        <div class="hotli" v-for="item in hotlist" @click="routeto('chprodetails', {id: item.id})">
          <div class="mask">
            <img v-if="item.mark === '新品'" src="../../assets/images/newpro.png">
            <img v-else-if="item.mark === '热卖'" src="../../assets/images/hotsale.png">
            <img v-else-if="item.mark === '爆款'" src="../../assets/images/hotcake.png">
          </div>
          <div class="imgarea">
            <img :src="item.imgUrl">
          </div>
          <div class="contain">
            <p class="hotlititle">{{item.title}}</p>
            <div class="hotliprice">
              <!-- <p class="">精选价:<span class="oriPrice">{{item.groupPrice}}</span>元</p> -->
              <p class="">吊牌价:<span class="oriPrice">{{item.originalPrice}}</span>元</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'vux/src/components/swiper/swiper.vue'
export default{
  name: 'choiceness',
  components: {
    Swiper
  },
  data () {
    return {
      swiperlist: [],
      hotlist: [],
      isshow1: false,
      isshow2: false,
      isshow3: false
    }
  },
  created () {
    this.queryProductGrouponIsHot()
    // get swiper list
    this.queryBannerInfoModth()
  },
  methods: {
    routeToTrack (name, params) {
      window.zhuge.track('Click', {
        '事件名称': '当月精选-分类-点击',
        '访问时间': new Date().toLocaleString(),
        'OpenID': this.getCookie('openid'),
        '分类名称': this.$route.meta.title
      }, () => {
        this.routeto(name, params)
      })
    },
    queryProductGrouponIsHot () {
      this.$axios.post(this.apidomain + '/api/productGroupon/queryProductGrouponIsHot/' + this.getCookie('appid'))
      .then((response) => {
        this.hotlist = response.data.data
      })
      .catch((error) => {
        console.log(error)
      })
    },
    queryBannerInfoModth () {
      this.$axios.post(this.apidomain + '/api/productGroupon/queryBannerInfoModth/' + this.getCookie('appid'))
      .then((response) => {
        if (response.data.errorCode === '0') {
          this.swiperlist = response.data.data
        }
      })
      .catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>
<style lang="less">
  @import '../../assets/less/choiceness/choiceness.less';
</style>
